<!--
/**
* Author: gaohui
* Date: 2023-03-01 15:47
* Desc: BtnContainer 按钮外层容器
*/
-->

<template>
  <div class="btn-container-box mb20">
    <link-btn
      v-for="(item, index) in arr"
      :key="index"
      class="item"
      :link="item.link"
      :btn-text="item.text"
    />
    <el-divider v-if="arr.length >= 9">
      <span class="tip-text">已经到底了哦~</span>
    </el-divider>
  </div>
</template>

<script name="BtnContainer" lang="ts" setup>
import { PropType } from "vue";
import LinkBtn from "./LinkBtn.vue";
interface ItemType {
  link: string;
  text: string;
}
defineProps({
  arr: {
    type: Array as PropType<ItemType[]>,
    default: () => {
      return [];
    },
  },
});
</script>
<style lang="scss" scoped>
.btn-container-box {
  border: 1px solid #f8fbff;
  box-shadow: 0px 4px 20px 0px #eaeff6;
  border-radius: 8px;
  max-height: 600px;
  padding: 10px;
  overflow-y: scroll;
  box-sizing: border-box;
  .item {
    width: 50%;
    margin: 0 10px;
    box-sizing: border-box;
    margin-bottom: 10px;
    display: flex;
    justify-content: flex-start;
  }
  .tip-text {
    font-size: 14px;
    color: #999999;
  }
}
</style>
